<template>
  <div class="app-container">
    <h1>在库设备实例列表</h1>
    <el-table
      :data="dev.repo"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="设备ID" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="设备RFID" min-width="150px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.rfid}}</span>
        </template>
      </el-table-column>

      <el-table-column label="设备所在仓库" width="150px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.base}}</span>
        </template>
      </el-table-column>

      <el-table-column label="最近入库时间" width="150px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.last}}</span>
        </template>
      </el-table-column>


      <el-table-column label="操作" align="center" width="400" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini">
            编辑信息
          </el-button>
          <el-button size="mini" type="danger">
            删除设备实例
          </el-button>
        </template>
      </el-table-column>


    </el-table>
    <pagination  total="5" />



    <h1>不在库设备实例列表</h1>

    <el-table
      :data="dev.hum"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="设备ID" prop="id" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="设备RFID" min-width="150px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.rfid}}</span>
        </template>
      </el-table-column>

      <el-table-column label="设备所有者" width="150px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.owner}}</span>
        </template>
      </el-table-column>

      <el-table-column label="最近流转时间" width="150px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.last}}</span>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" width="400" class-name="small-padding fixed-width">
        <template slot-scope="{row,$index}">
          <el-button type="primary" size="mini">
            编辑信息
          </el-button>
          <el-button size="mini" type="danger">
            删除设备实例
          </el-button>
        </template>
      </el-table-column>



    </el-table>
    <pagination  total="5" />



  </div>
</template>

<script>
import {getInsList} from "@/api/device";
import Pagination from '@/components/Pagination'

export default {
  components:{
    Pagination
  },
  mounted() {
    this.id=this.$route.query.id
    this.getList()
  },
  data(){
    return{
      id:0,
      dev:{}
    }
  },
  methods:{
    getList(){
      getInsList({
        id:this.id
      }).then((res)=>{
        this.dev=res.data
        console.log(res.data)
      })
    }
  }
}
</script>

<style scoped>

</style>
